<template>
  <view class="user-list">
    <view class="search-box">
      <uni-easyinput confirmType="search" prefixIcon="search" v-model="searchKey" :trim="true" placeholder="搜索用户" @confirm="searchUser"></uni-easyinput>
    </view>
    <view class="user-box">
      <view v-if="!isFirstLoad && !userList.length" class="no-content">暂无数据</view>
      <view v-for="item in userList" :key="item.key" @click="chooseUser(item)" class="user-item-box">
        <view class="user-item">
          <i v-if="!item.userIcon" class="user-icon iconfont icon-userCenter" />
          <image v-else class="user-icon" :src="item.userIcon" mode="aspectFill"></image>
          <view class="user-name">{{ item.userName }}</view>
          <view class="user-phone">{{ item.userPhone }}</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import { USER_ROLE } from '@/constant/index.js'
import { getImagePath, formatPhone } from '@/utils/index.js'
export default {
  data() {
    return {
      searchKey: '',
      isFirstLoad: true,
      userList: [],
      pagination: {
        page: 1,
        pageSize: 10,
        total: 0
      }
    }
  },
  mounted() {
    this.searchUser()
  },
  methods: {
    searchUser() {
      const self = this
      uni.request({
        url: '/user/search',
        data: {
          key: self.searchKey,
          role: [USER_ROLE.ADMIN, USER_ROLE.AGENT].join(',')
        },
        success(result) {
          self.isFirstLoad = false
          if (result.data.success && Array.isArray(result.data.data)) {
            const arr = []
            result.data.data.forEach(item => {
              arr.push({
                key: item.id,
                userID: item.id,
                userIcon: getImagePath(item.photo),
                userName: item.name || '未知用户',
                userPhone: formatPhone(item.phone),
                remark: item.remark || ''
              })
            })
            self.userList = arr
            self.$forceUpdate()
          }
        }
      })
    },
    chooseUser(user) {
      const pages = getCurrentPages()
      const prevPage = pages[pages.length - 2]
      prevPage.$vm.projectOwnerName = user.userName
      prevPage.$vm.projectOwnerId = user.userID
      uni.navigateBack({
        delta: 1
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.user-list {
  min-height: 100vh;
  background-color: $white;
  padding: 30rpx;
  .search-box {
  }
  .user-box {
    .no-content {
      margin-top: 30vh;
      text-align: center;
    }
    .user-item-box {
      margin-top: 30rpx;
      border: 2rpx dashed $border-base;
      border-radius: 10rpx;
      padding: 20rpx;
    }
    .user-item {
      position: relative;
      padding: 20rpx 0 20rpx 80rpx;
      height: 60rpx;
      display: flex;
      align-items: center;
      .user-icon {
        position: absolute;
        left: 0;
        top: 0;
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        font-size: 60rpx;
        color: $primary;
      }
      .user-name {
        flex: 1;
        max-width: 380rpx;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
      }
      .user-phone {
        flex: none;
        width: 200rpx;
      }
    }
  }
}
</style>
